<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设备报修</title>
		<link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
	</head>
	
	<style>
		#tools {
			display: flex;
		}
	
		#search {
			width: 600px;
			display: flex;
			/* 				justify-content: space-between; */
		}
	
		body {
			min-width: 1200px;
		}
	</style>
	
	
	<body>
		<h1>设备报修管理</h1>
		<hr />
		<div id="tools">
		<div id="search">
			<input type="text" id="deviceName" placeholder="请输入设备名称" />
			<button class="layui-btn" onclick="searchUser()"><i class="fa fa-search"></i>查询</button>
		</div>
		
		<div>
			<button class="layui-btn" onclick="showAddeqRepairModel()"><i class="fa fa-plus"></i> 设备报修</button>
			<button class="layui-btn layui-btn-normal" onclick="showEditeqRepairModel()"><i class="fa fa-edit"></i>
				修改报修单</button>
			<button class="layui-btn layui-btn-danger" onclick="deleteeqRepair()"><i class="fa fa-trash"></i> 删除报修单</button>
		</div>
		</div>
		<table id="eqRepairInfoTable" lay-even class="layui-table" lay-filter="test">
		
		</table>
		
		<div id="addeqRepairModel" style="display: none;" align="center">
			<form class="layui-form layui-form-pane" style="margin: 0px 20px;">
				<input type="hidden" name="repairId" id="repairId" />
				<div class="layui-form-item">
					<label class="layui-form-label">设备名</label>
					<div class="layui-input-block">
						<input type="text" id="deviceName" name="deviceName" required
							placeholder="请输入设备名" autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">设备类型</label>
					<div class="layui-input-block">
						<input type="text" id="deviceType" name="deviceType" required
							placeholder="请输入设备类型" autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">楼栋</label>
					<div class="layui-input-block">
						<input type="text" id="build" name="build" required
							placeholder="请输入楼栋" autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">楼层</label>
					<div class="layui-input-block">
						<input type="text" id="floor" name="floor" required
							placeholder="请输入楼层" autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">具体位置</label>
					<div class="layui-input-block">
						<input type="text" id="spLocation" name="spLocation" required
							placeholder="请输入具体位置" autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">备注</label>
					<div class="layui-input-block">
						<input type="text" id="remark" name="remark" required
							placeholder="请输入备注" autocomplete="off" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">图片</label>
				    <button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>上传图片</button>
				    <div class="layui-inline layui-word-aux">
				        请上传维修图片
				    </div>
				</div>
				
				<div class="layui-form-item">
					<div class="layui-input-block" style="margin-left: 0px;">
						<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
		
		<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function searchUser() {
				layui.table.reload("eqRepairInfoTable", {
					where: {
						deviceName: layui.$("#deviceName").val(),
						
					}
				})
					console.log("5555555555555555");
				console.log(deviceName);
			}
			
			
			
			//设定文件大小限制
			layui.upload.render({
			    elem: '#test7',
			    url: '', //改成您自己的上传接口
			    size: 60, //限制文件大小，单位 KB
			    done: function(res){
			      layer.msg('上传成功');
			      console.log(res)
			    }
			});
			
			var options = {
				elem: '#eqRepairInfoTable',
				height: 312,
				url: 'http://127.0.0.1:8080/repair/repairManager/selectByPage', //数据接口
				page: true, //开启分页
				response: {
					statusCode: 200 //规定成功的状态码，默认：0
				},
				parseData: function(res) { //res 即为原始返回的数据
					console.log(res);
					return {
						"code": res.code, //解析接口状态
						"msg": res.msg, //解析提示文本
						"count": res.data.total, //解析数据长度
						"data": res.data.list //解析数据列表
					};
				},
				cols: [
					[ //表头
						{
							type: 'checkbox'
						}, {
							field: 'repairId',
							title: '报修单号',
							width: 120,
							sort: true
						}, {
							field: 'build',
							title: '楼栋号',
							width: 100
						}, {
							field: 'floor',
							title: '楼层',
							width: 100,
							sort: true
						}, {
							field: 'deviceName',
							title: '设备名称',
							width: 200
						}, {
							field: 'userName',
							title: '报修人',
							width: 150
						},{
							field: 'remark',
							title: '备注',
							width: 150
						},{
							field: 'spLocation',
							title: '具体位置',
							width: 150
						},{
							field: 'createTime',
							title: '报修时间',
							width: 150
						}
					]
				]
			};
			
			layui.use('table', function() {
				var table = layui.table;
			
				//第一个实例
				eqRepairTab = table.render(options);		
			});
			
			function showAddeqRepairModel() {
				clearModel();
				layui.use('layer', function() {
					var layer = layui.layer;
					var $ = layui.$;
			
					eqRepairMode = layer.open({
						title: '添加设备',
						type: 1,
						content: $('#addeqRepairModel') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});
				});
			}
			
			layui.use('form', function() {
				var form = layui.form;
			
				//监听提交
				form.on('submit(formDemo)', function(data) {
					//关闭模态框
					layui.use('layer', function() {
			
						//通过ajax提交
						console.log("88888888888888");
						console.log(data.field.deviceId);
						console.log(data.field.deviceName);
						console.log(data.field.deviceType);
						console.log(data.field.build);
						console.log(data.field.floor);
						
						var repairData;
						var url;
						if (data.field.repairId == "") {
							url = "http://127.0.0.1:8080/repair/repairManager/addRepair";
							repairData = {
								repairName: data.field.deviceName,
								repairType: data.field.deviceType,
								build: data.field.build,
								floor: data.field.floor
							};
						} else {
							url = "http://127.0.0.1:8080/repair/repairManager/updateRepair";
							repairData = {
								repairId: data.field.repairId,
								repairName: data.field.deviceName,
								repairType: data.field.deviceType,
								build: data.field.build,
								floor: data.field.floor
							};
						}
					
						layui.$.ajax({
							url: url,
							method: "post",
							data: repairData,
							dataType: "json",
							success: function(data) {
								if (data.code == 200) {
									//表示添加成功
									//关闭模态框
									layui.layer.close(eqRepairMode);
									//刷新页面
									deviceTab.reload(options);
									//弹出添加成功的提示
									layui.layer.msg(data.msg);
			
								}
								if (data.code == 500) {
									//表示添加失败
									layui.layer.msg(data.msg);
								}
							}
						});
			
					});
					return false;
				});
			});
			
			function showEditeqRepairModel() {
				clearModel();
				layui.use(['table', 'layer'], function() {
					var table = layui.table;
			
					var checkStatus = table.checkStatus('eqRepairInfoTable');
					console.log(checkStatus.data); //获取选中行的数据
					console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件
					console.log(checkStatus.isAll); //表格是否全选
					if (checkStatus.data.length == 0) {
						layui.layer.msg('请选择数据');
						return;
					}
			
					if (checkStatus.data.length > 1) {
						layui.layer.msg('请选择一条数据');
						return;
					}
			
					//向模态框赋值
					layui.$("#repairId").val(checkStatus.data[0].repairId);
					layui.$('#deviceName').val(checkStatus.data[0].deviceName);
					layui.$('#deviceType').val(checkStatus.data[0].deviceType);
					layui.$('#build').val(checkStatus.data[0].build);
					layui.$('#floor').val(checkStatus.data[0].floor);
					layui.$('#remark').val(checkStatus.data[0].remark);
					layui.$('#spLocation').val(checkStatus.data[0].spLocation);
					
					//展示模态框
					eqRepairMode = layui.layer.open({
						title: '编辑报修单',
						type: 1,
						content: layui.$('#addeqRepairModel') 
					});		
				})
			}
			
			function clearModel() {
				layui.$('#repairName').val('');
				layui.$('#repairType').val('');
				layui.$('#build').val('');
				layui.$('#floor').val('');
				layui.$('#remark').val('');
				layui.$('#spLocation').val('');
			}
			
			function deleteeqRepair() {
				layui.use(['table', 'layer'], function() {
					var table = layui.table;
			
					var checkStatus = table.checkStatus('eqRepairInfoTable');
					console.log(checkStatus.data); //获取选中行的数据
					console.log(checkStatus.data.length); //获取选中行数量，可作为是否有选中行的条件
					console.log(checkStatus.isAll); //表格是否全选
					if (checkStatus.data.length == 0) {
						layui.layer.msg('请选择数据');
						return;
					}
			
					var allRepairId = [];
					for (var i = 0; i < checkStatus.data.length; i++) {
						allRepairId.push(checkStatus.data[i].repairId);
					}
					//向后台提交
					layui.$.ajax({
						url: "http://127.0.0.1:8080/repair/repairManager/deleteRepair",
						method: "post",
						data: {
							"allRepairId": allRepairId
						},
						dataType: "json",
						success: function(data) {
							if (data.code == 200) {
								//表示添加成功
								//关闭模态框
								//刷新页面
								eqRepairTab.reload(options);
								//弹出添加成功的提示
								layui.layer.msg(data.msg);	
							}
							if (data.code == 500) {
								//表示添加失败
								layui.layer.msg(data.msg);
							}
						}
					});
				});
			}
			
		</script>
	</body>
</html>
